<template>
<div class="common-page tech-publish">
  <tab-panel class="tech-publish-tab" :tab-list="tabList">
    <div class="panel" slot="dna"  >
      <dna-compare></dna-compare>
    </div>
    <div class="panel" slot="finger" slot-scope="scope">
      {{scope.tab.label}}
    </div>
    <div class="panel" slot="footprint" slot-scope="scope">
      {{scope.tab.label}}
    </div>
    <div class="panel" slot="vision" slot-scope="scope">
      {{scope.tab.label}}
    </div>
  </tab-panel>
</div>
</template>

<style lang="scss" scoped>
@import "../../../src/style/_vars.scss";
.tech-publish{
  background: $--background-color-base;
  padding: 10px;
  
  .tech-publish-tab{
    border-radius: 5px;
    background: white;
    .panel{
      height: 100%;
      padding: 10px;
    }
  }
}
</style>

<script>
import TabPanel from '@/components/common/tab-panel'
import DnaCompare from '../components/tech-publish/dna-compare'
export default {
  name: 'techPublish',
  components: {
    TabPanel,
    DnaCompare
  },
  props: {
  },
  data() {
    return {
      tabList: [
        {label: 'DNA比中', name: 'dna'},
        {label: '指纹比中', name: 'finger'},
        {label: '足迹比中', name: 'footprint'},
        {label: '视频图像比中', name: 'vision'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

